<template>
  <div class="lp-tip" v-if="show">
    <div class="title">{{title}}</div>
    <div class="body">
      <slot></slot>
    </div>
    <div class="foot">
      <slot name="foot">
        <a href="javascript:void(0)" class="lp-btn large primary" @click="close">{{comfirmTitle}}</a>
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    title: {
      type: String
    },
    comfirmTitle: {
      default: '确定',
      type: String
    }
  },
  methods: {
    close() {
      this.$emit('recall')
    }
  }
}
</script>
<style lang="scss">
.lp-tip {
  width: 1200px;
  margin: 50px auto;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  .title {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    padding: 80px 35px 35px;
  }
  .body {
    padding: 0 100px;
    font-size: 24px;
  }
  .foot {
    padding: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
